<template>
  <div style="margin:40px 0">
    <div class="wrap">
      <div class="label" v-if="sbrand !== ''">
        <div>{{sbrand}}</div>
        <Icon type="ios-close" size="24" @click="selectBrand('')"/>
      </div>
      <div class="label" v-if="srom !== ''">
        <div>{{srom}}</div>
        <Icon type="ios-close" size="24" @click="selectRom('')"/>
      </div>
      <div class="label" v-if="sos !== ''">
        <div>{{sos}}</div>
        <Icon type="ios-close" size="24" @click="selectOs('')"/>
      </div>
    </div>

    <div class="row" v-if="sbrand === ''">
      <div class="left">品牌</div>
      <div class="right">
        <div v-for="item in brand" style="margin:0 10px" @click="selectBrand(item)" :key="item">{{item}}</div>
      </div>
    </div>
    <div class="row" v-if="srom === ''">
      <div class="left">机身内存</div>
      <div class="right">
        <div v-for="item in rom" style="margin:0 10px" @click="selectRom(item)" :key="item">{{item}}</div>
      </div>
    </div>
    <div class="row" v-if="sos === ''">
      <div class="left">操作系统</div>
      <div class="right">
        <div v-for="item in os" style="margin:0 10px" @click="selectOs(item)" :key="item">{{item}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import service from "@/service";
export default {
  name: "comFilterMenu",
  data() {
    return {
      brand: [],
      rom: [],
      os: [],
      sbrand:'',
      srom:'',
      sos:''
    };
  },
  created() {
    service.get("/v1/home/filterMenu").then(res => {
      console.log(res)
      this.brand = res.brand
      this.rom = res.rom
      this.os = res.os
    });
  },
  methods: {
    selectBrand(brand) {
      this.sbrand = brand
      this.$emit('on-filter',this.sbrand,this.srom,this.sos)
    },
    selectRom(rom) {
      this.srom = rom
      this.$emit('on-filter',this.sbrand,this.srom,this.sos)
    },
    selectOs(os) {
      this.sos = os
      this.$emit('on-filter',this.sbrand,this.srom,this.sos)
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  display:flex;
  margin-left: 20px;
  margin-bottom: 20px;
  .label {
    display: flex;
    background: #2d8cf0;
    border-radius:5px;
    color:#fff;
    padding: 2px 5px;
    font-size:16px;
    margin-right: 10px;
  }
}
.row {
  display: flex;
  border: 1px solid #ddd;
  .left {
    width: 200px;
    height: 30px;
    line-height: 30px;
    background: #f3f3f3;
  }
  .right {
    display: flex;
    height: 30px;
    line-height: 30px;
    color: #005aa0;
  }
}
</style>